<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script>
        window.onload=function (){
            findRole();
        }

        function  findRole(){
            axios.get("/role/findAll",null).then(e =>{
                var info =e.data;
                var str ="";
                for (var i=0;i<info.length;i++){
                    str +=`<input type="checkbox" name="roleArray" value="${info[i].id}">${info[i].name}`
                }
                $("roleDiv").innerHTML=str

            });
        }

        function getItem(){
            var idArray = [];
            var boxList = document.querySelectorAll(

                "#roleDiv [name='roleArray']:checked");

            for (var i=0;i<boxList.length;i++){
                idArray.push(boxList[i].value);
            }
            return idArray;
        }



        function findGrade(){

            var roleArray=getItem();
            if (roleArray.length==0){
                $("gradeDiv").innerHTML="";

                return;
            }



            var params=new URLSearchParams();
            params.append("roleArray",getItem());
            axios.post("/grade/findByRoleArray",params).then(e=>{
                var info = e.data;
                var str = "";
                for (var i=0;i<info.length;i++){
                    str+= info[i].name+",";
                }
                $("gradeDiv").innerHTML = str;
            })
        }


        function  addUser(){
            var params=new URLSearchParams();
            params.append("account",$("account").value);

            params.append("name",$("name").value);

            params.append("roleArray",getItem());


            axios.post("/user/add",params).then(e =>{

                if (e.data =="ok"){
                    location.href="/user/user.html";
                }
            });

        }
    </script>
</head>
<body>
<h2>添加用户</h2>
用户名:<input type="text" id="account"><br>
名字:<input type="text" id="name"><br>
拥有角色:<div id="roleDiv" style="width: 300px" onclick="findGrade()"></div>
拥有权限:<div id="gradeDiv" style="width:300px"></div>
<input type="button" value="添加" onclick="addUser()">

</body>
</html>